<!--
* @author wn
* @date 2023/09/12 15:58:32
* @description: 商品详情骨架屏
!-->
<template>
	<template name="skeleton">
		<view class="sk-container">
			<scroll-view
				enable-back-to-top="true"
				scroll-y="true"
				class="scroll-view"
			>
				<view class="preview">
					<swiper circular="true" current="0" autoplay="false">
						<swiper-item
							style="
								position: absolute;
								width: 100%;
								height: 100%;
								transform: translate(0%, 0px) translateZ(0px);
							"
						>
							<image mode="aspectFill" class="sk-image"></image>
						</swiper-item>
					</swiper>
					<view class="indicator">
						<text class="current sk-transparent sk-opacity">1</text>
						<text class="split sk-transparent sk-opacity">/</text>
						<text class="total sk-transparent sk-opacity">5</text>
					</view>
				</view>
				<view class="meta">
					<view class="price">
						<text class="symbol sk-transparent sk-opacity">¥</text>
						<text class="number sk-transparent sk-text-28-4615-806 sk-text"
							>259.00</text
						>
					</view>
					<view class="name ellipsis sk-transparent sk-text-14-2857-859 sk-text"
						>女式高弹金丝针织面金属跟短靴</view
					>
					<view class="desc sk-transparent sk-text-0-0000-953 sk-text"
						>金丝闪耀，如踏万千星辉app</view
					>
				</view>
				<view class="action">
					<view class="item icon-right-after sk-pseudo sk-pseudo-circle">
						<text class="label sk-transparent sk-text-14-2857-360 sk-text"
							>选择</text
						>
						<text
							class="text ellipsis sk-transparent sk-text-14-2857-843 sk-text"
						>
							请选择商品规格
						</text>
					</view>
					<view class="item icon-right-after sk-pseudo sk-pseudo-circle">
						<text class="label sk-transparent sk-text-14-2857-79 sk-text"
							>送至</text
						>
						<text
							class="text ellipsis sk-transparent sk-text-14-2857-214 sk-text"
						>
							请选择收获地址
						</text>
					</view>
					<view class="item icon-right-after sk-pseudo sk-pseudo-circle">
						<text class="label sk-transparent sk-text-14-2857-633 sk-text"
							>服务</text
						>
						<text
							class="text ellipsis sk-transparent sk-text-14-2857-454 sk-text"
						>
							无忧退 快速退款 免费包邮
						</text>
					</view>
				</view>
				<view class="detail panel">
					<view class="title sk-transparent sk-text-0-0000-278 sk-text">
						详情
					</view>
					<view class="properties">
						<view class="item">
							<text class="label sk-transparent sk-text-25-0000-861 sk-text"
								>适用季节</text
							>
							<text class="value sk-transparent sk-text-25-0000-529 sk-text"
								>冬、秋</text
							>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</template>
</template>
<style lang="scss">
.sk-transparent {
	color: transparent !important;
}
.sk-opacity {
	opacity: 0 !important;
}
.sk-text-28-4615-806 {
	background-image: linear-gradient(
		transparent 28.4615%,
		#eeeeee 0%,
		#eeeeee 71.5385%,
		transparent 0%
	) !important;
	background-size: 100% 130rpx;
	position: relative !important;
}
.sk-text {
	background-origin: content-box !important;
	background-clip: content-box !important;
	background-color: transparent !important;
	color: transparent !important;
	background-repeat: repeat-y !important;
}
.sk-text-14-2857-859 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.8rpx;
	position: relative !important;
}
.sk-text-0-0000-953 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 24rpx;
	position: relative !important;
}
.sk-text-14-2857-360 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-14-2857-843 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-14-2857-79 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-14-2857-214 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-14-2857-633 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-14-2857-454 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-0-0000-278 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 28rpx;
	position: relative !important;
}
.sk-text-25-0000-861 {
	background-image: linear-gradient(
		transparent 25%,
		#eeeeee 0%,
		#eeeeee 75%,
		transparent 0%
	) !important;
	background-size: 100% 52rpx;
	position: relative !important;
}
.sk-text-25-0000-529 {
	background-image: linear-gradient(
		transparent 25%,
		#eeeeee 0%,
		#eeeeee 75%,
		transparent 0%
	) !important;
	background-size: 100% 52rpx;
	position: relative !important;
}
.sk-text-31-9444-565 {
	background-image: linear-gradient(
		transparent 31.9444%,
		#eeeeee 0%,
		#eeeeee 68.0556%,
		transparent 0%
	) !important;
	background-size: 100% 72rpx;
	position: relative !important;
}
.sk-text-31-9444-139 {
	background-image: linear-gradient(
		transparent 31.9444%,
		#eeeeee 0%,
		#eeeeee 68.0556%,
		transparent 0%
	) !important;
	background-size: 100% 72rpx;
	position: relative !important;
}
.sk-button {
	color: #efefef !important;
	background: #efefef !important;
	border: none !important;
	box-shadow: none !important;
}
.sk-image {
	background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
	background: #efefef !important;
	background-image: none !important;
	color: transparent !important;
	border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
	border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
	border-radius: 50% !important;
}
.sk-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
}
</style>
